<template>
	<view>
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="verticalNavLeft">
			<view class="cu-item" v-for="(item, index) in typeList" @tap="TabSelect(index)">
				<view class="item-name">{{ item.time.padStart(2, '0') }}:00</view>
				<view class="bor-bottom" :class="index == currentIndex ? ' cur' : ''">{{index == nowTime ? '抢购中' :( item.time <= hour ? '已开抢' : '即将开抢' )}}</view>
			</view>
		</scroll-view>
		<!-- 商品 -->
		<scroll-view class="goods-box" scroll-y :scroll-with-animation="true" :scroll-into-view="'main-' + mainCur" @scroll="VerticalMain" v-show="flag">
			<view class="kill-item" v-for="(item, index) in goods" :id="'main-' + index">
				<view class="kill-tit u-f-jsb" :class="index == 0 ? 'gold' : 'nomal'">
					<view class=" name">{{ item.type.padStart(2, '0') }}:00</view>
					<view class="u-f-ac countdown">
						<uni-countdown color="#fff" background-color="#ff3d27" :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
						后结束
					</view>
				</view>
				<view class="bg-white">
					<view @click="Route({url: `/pages/common/goodsDetail/goodsDetail?detail=${encodeURIComponent(JSON.stringify(proList))}&relations=${encodeURIComponent(JSON.stringify(proList.relation))}`})"
						class="goods-item u-f"
						v-for="proList in item.list"
						>
						<image :src="proList.mainPicture" mode="aspectFill"></image>
						<image src="../../../static/goods/sellout_kill.png" mode="aspectFill" class="sellout" v-if="proList.relation.productStock < 1"></image>
						<view class="good-info">
							<view class="good-name texts-cut">{{ proList.productName }}</view>
							<view class="flexend">
								<view class="ms-box u-f-ac">
									<view class="tit">秒杀价</view>
									<view class="colorr" v-if="proList.buyLimit">限{{ proList.buyLimit }}份</view>
								</view>
								<view class="food-btm u-f-jsb">
									<view class="spec">
										<view class="food-price">￥{{ proList.relation.marketPrice }}</view>
										<view class="u-f-ac">
											<view class="line-through">￥{{ proList.relation.productPrice }}</view>
											<text class="productStock ml0 text-red" v-if="proList.relation.productStock > 0 && proList.relation.productStock < 11">（仅剩{{proList.relation.productStock}}件）</text>
										</view>
									</view>
									<view>
										<cart-control :food="proList" :carList="carList" @cartChange="handelCart" v-if="proList.startTime <= hour"></cart-control>
										<view class="round addcart" v-else>即将开抢</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 购物车 -->
		<shop-cart :goods="carList" @delAll="delAll" @change="handelCart" bottom="0"></shop-cart>
	</view>
</template>

<script>
import Vue from 'vue';
export default {
	data() {
		return {
			load: true,
			flag: false,
			hour: 0, //当前小时
			currentIndex: 0,
			nowTime:0,
			scrollLeft: 0,
			verticalNavLeft: 0,
			mainCur: 0,
			typeList: [
				{
					time: '23',
					type: 0
				},
				{
					time: '0',
					type: 0
				},
				{
					time: '6',
					type: 0
				},
				{
					time: '8',
					type: 0
				},
				{
					time: '9',
					type: 0
				},
				{
					time: '10',
					type: 0
				},
				{
					time: '12',
					type: 0
				},
				{
					time: '14',
					type: 0
				},
				{
					time: '16',
					type: 0
				},
				{
					time: '18',
					type: 0
				},
				{
					time: '20',
					type: 0
				}
			],
			goods: [],
			carList: this.$store.state.carList || [],
			userInfo: {}
		};
	},
	onShow() {
		this.carList = this.$store.state.carList || [];
		if (!this.flag) return;
		this.goods.forEach(item => {
			item.list.forEach(pro => {
				// 购物车为空
				if (this.carList.length == 0) {
					pro.count = 0;
				} else {
					// 钩吻车不为空，遍历购物给商品count赋值
					this.carList.forEach(car => {
						if (pro.id == car.id) {
							pro.count = car.count;
						}
					});
				}
			});
		});
	},
	onLoad() {
		let that = this;
		uni.showLoading({
			title: '正在加载'
		});
		this.hour = new Date().getHours();
		this.$http.post('/api/search/products/secKill', { moudleId: 1 }, { header: { authType: 'false' } }).then(res => {
			res.data.rows.forEach((item, index) => {
				let obj = {};
				obj.list = item;
				// 给不同时间段添加商品
				obj.type = this.typeList[index].time;
				obj.list.forEach(pro => {
					Vue.set(pro, 'count', 0);
					if (!this.carList) return;
					// 遍历购物车给商品列表赋值
					this.carList.forEach(car => {
						if (pro.id == car.id) {
							pro.count += car.count;
						}
					});
				});
				this.goods.splice(index, 0, obj);
				if (obj.type <= this.hour && this.hour <= 23) {
					this.currentIndex++;
					this.nowTime++
					this.verticalNavLeft = (this.currentIndex - 1) * 50;
				}
			});
			this.currentIndex = this.currentIndex == 11 ? 0 : this.currentIndex;
		});
	},
	onReady() {
		setTimeout(() => {
			this.TabSelect(this.currentIndex);
			uni.hideLoading();
			this.flag = true;
		}, 2000);
	},
	methods: {
		TabSelect(index) {
			this.currentIndex = this.mainCur = index;
			this.verticalNavLeft = (index - 1) * 50;
		},
		// 购物车
		handelCart(car) {
			this.carList = this.$store.state.carList;
			this.goods.forEach(item => {
				item.list.forEach(pro => {
					if (pro.id == car.id) {
						pro.count = car.count;
					}
				});
			});
		},
		// 清空购物车
		delAll() {
			this.carList = [];
			this.goods.forEach(item => {
				item.list.forEach(pro => {
					pro.count = 0;
				});
			});
		},
		VerticalMain(e) {
			// #ifdef MP-ALIPAY
			return false; //支付宝小程序暂时不支持双向联动
			// #endif
			let tabHeight = 0;
			if (this.load) {
				for (let i = 0; i < this.goods.length; i++) {
					let view = uni.createSelectorQuery().select('#main-' + i);
					view.fields(
						{
							size: true
						},
						data => {
							this.goods[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.goods[i].bottom = tabHeight;
						}
					).exec();
				}
				this.load = false;
			}
			let scrollTop = e.detail.scrollTop - 10;
			for (let i = 0; i < this.goods.length; i++) {
				if (scrollTop > this.goods[i].top && scrollTop < this.goods[i].bottom) {
					this.currentIndex = i;
					this.verticalNavLeft = (i - 1) * 50;
					return false;
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: linear-gradient(to right bottom, #2ba4f7, #fff);
}
// 头部
.nav {
	background: linear-gradient(to right, #2ba4f7, #9ed6fc);
	min-height: 100rpx;
	padding: 10rpx 0;
	position: fixed;
	z-index: 99;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	.cu-item {
		display: inline-block;
		font-size: 28rpx;
		color: #fff;
		font-weight: 900;
		text-align: center;
		height: 106rpx;
		line-height: 50rpx;
		.item-name {
			font-size: 36rpx;
		}
	}
	.bor-bottom.cur {
		background-color: #ffffff;
		color: #2ba4f7;
		padding: 0 10rpx;
		border-radius: 26rpx;
	}
}
// 商品部分
.goods-box {
	height: 100vh;
	padding-top: 130rpx;
	padding-bottom: 56px;
	/* #ifdef MP-WEIXIN */
	padding-bottom: 120rpx;
	/* #endif */
}
.kill-item {
	margin: 20rpx 20rpx 0;
	border-radius: 20rpx;
	overflow: hidden;
}
.gold {
	background: linear-gradient(to right, #ffdf59, #fffefb);
	.name {
		color: #602202;
	}
}
.nomal {
	background: linear-gradient(to right, #ffe1e1, #fffdfd);
}
.kill-tit {
	padding: 10rpx 20rpx;
	.name {
		font-size: 36rpx;
		font-weight: 900;
	}
	.countdown {
		color: #2ba4f7;
	}
}
.bg-white {
	padding: 20rpx;
}
.goods-item {
	position: relative;
	.good-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		flex: 1;
	}
	.sellout{
		position: absolute;
		top: 13upx;
		left: 13upx;
		height: 180upx;
		width: 180upx;
	}
	image {
		display: inline-block;
		height: 206upx;
		width: 206upx;
		border-radius: 20rpx;
	}
	.food-price {
		color: #f22222;
		font-size: 34rpx;
		font-weight: 700;
	}
	.line-through {
		font-size: 24rpx;
	}
}
.goods-item:not(last-child) {
	margin-bottom: 20rpx;
}
.ms-box {
	position: relative;
	margin: 25rpx 0 12rpx;
	font-size: 24rpx;
	view {
		text-align: center;
		box-sizing: border-box;
	}
	.tit {
		padding: 5rpx 8rpx;
		background-color: #ff1216;
		color: #fff;
	}
	.colorr {
		padding: 3rpx 8rpx;
		border: 2rpx solid #ff1216;
		color: #ff1216;
		// flex: 1;
	}
}
.ms-box::before {
	content: '';
	position: absolute;
	bottom: -14rpx;
	left: 16rpx;
	width: 0;
	height: 0;
	border-left: 8rpx solid transparent;
	border-right: 8rpx solid transparent;
	border-top: 14rpx solid #ff1216;
	z-index: 1;
}
.food-btm {
	.addcart {
		background-color: #f0f0f0;
		width: 150upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 24upx;
		margin-top: 10rpx;
	}
}
.uni-countdown__number {
	font-weight: 800;
}
</style>
